<template>
    <view class="con">
        <view class="con-stall">
            <view class="con-stall-num">
                <view>
                    <text class="con-stall-num-i">{{data.wplxcount || 0}}</text>
                    <text>累计品类</text>
                </view>
                <view>
                    <text class="con-stall-num-i">{{data.wpdwkg || 0}}</text>
                    <text>累计重量（公斤）</text>
                </view>
                <view>
                    <text class="con-stall-num-i">{{data.wpdwge || 0}}</text>
                    <text>累计数量（台）</text>
                </view>
            </view>
            <view class="con-stall-quan">
                <view>
                    <text>订单共计：{{data.order_count || 0}}笔</text>
                </view>
                <view @click="popupShow = true">
                    <text>筛选</text>
                </view>
                <!-- <view>
                    <text>回收机：4笔</text>
                    <text>上门回收：0笔</text>
                </view> -->
            </view>
        </view>
        
        <view class="con-list">
            <view>
                <text>类型</text>
                <text>累计回收量</text>
            </view>
            <view v-for="(item,index) in data.list" :key="index">
                <text>{{item.wpname}}{{$u.test.isEmpty(item.wpsize) ? '' : item.wpsize}}</text>
                <text>{{item.wpcount}}</text>
            </view>
        </view>
        
        <u-popup v-model="popupShow" mode="right" length="80%">
            <view style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
                <view >
                    <view class="popup-list">
                        <view v-for="(item, index) in timeList" :key="index" @click="handTime(item)">
                            <text :class="[item.select ? 'popup-list-text' : '']">{{item.title}}</text>
                        </view>
                    </view>
                    <view style="display: flex;align-items: center;justify-content: center;">
                        <u-button  :type="is_custom ? 'warning':''" @click="showDate" plain>{{date_text}}</u-button>
                    </view>
                </view>

                <view class="popup-button">
                    <view class="popup-button-reset" @click="reset()">重置</view>
                    <view class="popup-button-define" @click="define()">确定</view>
                </view>
            </view>
            
            <u-calendar v-model="show_range" :mode="mode"  @change="changeDate"></u-calendar>
            
        </u-popup>
        
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                date_text:'自定义日期',
                startDate:'',
                endDate:'',
                show_range:false,
                is_custom:false,
                mode:"range",
                data: {},
                popupShow: false,
                timeList: [{
                    title: '所有',
                    stime: null,
                    etime: null,
                    select: false,
                }, {
                    title: '昨天',
                    stime: '',
                    etime: '',
                    select: false,
                }, {
                    title: '今天',
                    stime: '',
                    etime: '',
                    select: false,
                }, {
                    title: '本周',
                    stime: '',
                    etime: '',
                    select: false,
                }, {
                    title: '本月',
                    stime: '',
                    etime: '',
                    select: false,
                }],
                selectItem: {},
            }
        },
        onLoad() {
            this._getHsStatistics();
            this.getTime();
        },
        methods: {
            showDate(){
                this.show_range = true
            },
            changeDate(item){
                this.startDate = item.startDate
                this.endDate  = item.endDate
                this.date_text  = this.startDate +'至' + this.endDate
                this.show_range = false
                this.is_custom = true
            },
            handTime(item) {
                this.date_text = '自定义时间'
                this.is_custom = false
                this.timeList.forEach((i, index) => {
                    i.select = false;
                })
                item.select = true;
                this.selectItem = item;
            },
            getTime() {
                var date = new Date();
                var year = date.getFullYear(); //获取当前年份
                var mon = date.getMonth() + 1; //获取当前月份
                var day = date.getDate(); //获取当前日
                this.timeList[2].stime = Date.parse(year + '-' + mon + '-' + day + ' 00:00:00') / 1000;
                this.timeList[2].etime = Date.parse(year + '-' + mon + '-' + day + ' 23:59:59') / 1000;
                this.timeList[4].stime = Date.parse(year + '-' + mon + '-' + '01 00:00:00') / 1000;
                this.timeList[4].etime = Date.parse(year + '-' + mon + '-' + '30 23:59:59') / 1000;
                
                // 昨天
                var date2 = new Date();
                date.setDate(date.getDate() - 1);
                var year2 = date.getFullYear();
                var mon2 = date.getMonth() + 1;
                var day2 = date.getDate();
                this.timeList[1].stime = Date.parse(year2 + '-' + mon2 + '-' + day2 + ' 00:00:00') / 1000;
                this.timeList[1].etime = Date.parse(year2 + '-' + mon2 + '-' + day2 + ' 23:59:59') / 1000;
                
                // 本周
                var Nowdate = new Date();
                var WeekFirstDay = new Date(Nowdate-(Nowdate.getDay()-1)*86400000); // 本周第一天
                var WeekLastDay = new Date((WeekFirstDay/1000+6*86400)*1000);// 本周第最后一天
                this.timeList[3].stime = Date.parse(WeekFirstDay.getFullYear() + '-' + (WeekFirstDay.getMonth() + 1) + '-' + WeekFirstDay.getDate() + ' 00:00:00') / 1000;
                this.timeList[3].etime = Date.parse(WeekLastDay.getFullYear() + '-' + (WeekLastDay.getMonth() + 1) + '-' + WeekLastDay.getDate() + ' 23:59:59') / 1000;
            },
            reset() {
                this.timeList.forEach((i, index) => {
                    i.select = false;
                })
                this.popupShow = false;
            },
            define() {
                this.popupShow = false;
                this._getHsStatistics();
            },
            _getHsStatistics() {
                uni.showLoading({
                    title: '加载中'
                });
                let params = {};
                if(this.is_custom){
                    params = {
                        start_time: Date.parse(this.startDate+ ' 00:00:00')/1000,
                        end_time:Date.parse(this.endDate+ ' 23:59:59')/1000,
                    }
                }else{
                    if(!this.$u.test.isEmpty(this.selectItem.stime)) {
                        params = {
                            start_time: this.selectItem.stime,
                            end_time: this.selectItem.etime,
                        }
                    }
                }
                this.$u.api.getHsStatistics(params).then(res => {
                    this.data = res;
                    uni.hideLoading();
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .con {
        width: 100%;
        // height: 100vh;
        // background-color: #fff;
        
        .con-stall {
            background-color: #fff;
            //display: flex;
            .con-stall-num {
                display: flex;
                padding-top: 30rpx;
                
                view {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    width: 33%;
                    
                    text {
                        
                    }
                    
                    .con-stall-num-i {
                        margin-bottom: 10rpx;
                        color: #ffc362;
                        font-size: 35rpx;
                        font-weight: bold;
                    }
                }
            }
            
            .con-stall-quan {
                display: flex;
                padding: 30rpx 0;
                justify-content: space-between;
                
                view {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    min-width: 33%;
                    
                    text {
                        
                    }
                }
            }
        }
        
        .con-list {
            background-color: #FFFFFF;
            margin-top: 30rpx;
            
            view {
                display: flex;
                justify-content: space-between;
                border-bottom: 1rpx solid #f7f7f7;
                padding: 30rpx;
            }
        }
        
        .popup-list {
            display: flex;
            flex-wrap: wrap;
            
            view {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 33%;
                height: 100rpx;
                
                text {
                    padding: 10rpx 40rpx;
                    background-color: #e9eaeb;
                }
                
                .popup-list-text {
                    color: #ffb83c;
                    background-color: #fff4e6;
                }
            }
            
        }
        
        .popup-button {
            display: flex;
            padding-bottom: env(safe-area-inset-bottom);
            
            view {
                width: 50%;
                height: 100rpx;
                text-align: center;
                line-height: 100rpx;
                font-size: 30rpx;
            }
            
            .popup-button-reset {
                background-color: #f0f6ff;
            }
            .popup-button-define {
                background-color: #ff9e15;
                color: #FFFFFF;
            }
        }
    }
</style>
